import QtQuick
import QtQuick.Window

/*
DarkSquare {
    id: root
    width: 120; height: 240

    Column {
        id: column
        anchors.centerIn: parent
        spacing: 10

        RedSquare {}
        GreenSquare {width: 96}
        BlueSquare {}
    }

}
*/

/*
BrightSquare {
    id: root
    width: 400; height: 120
    Row {
        id: row
        anchors.centerIn: parent
        spacing: 10

        RedSquare {}
        GreenSquare {width: 96}
        BlueSquare {}
    }
}
*/

/*
BrightSquare {
    id: root
    width: 400; height: 160
    Grid {
        id: column
        anchors.centerIn: parent
        spacing: 20
        rows: 2
        columns: 3

        RedSquare {}
        GreenSquare {}
        BlueSquare {}
        RedSquare {}
        GreenSquare {}
        BlueSquare {}
    }
}
*/

/*
BrightSquare {
    id: root
    width: 400; height: 160
    Flow {
        id: column
        anchors.fill: parent
        anchors.margins: 20
        spacing: 20

        RedSquare {}
        GreenSquare {}
        BlueSquare {}
        RedSquare {}
        GreenSquare {}
        BlueSquare {}
    }
}
*/

DarkSquare {
    id: root
    width: 252; height: 252
    // variant 表示泛型, 会自动匹配. 也可以用var
    property variant colorArray: ["#00bde3", "#67c111", "#ea7025"]

    Grid { // columns默认值4
        anchors.centerIn: parent
        anchors.margins: 8
        spacing: 4

//        columns: 5 // 默认columns 4, 也可以手动指定
        Repeater { // 像while循环
            model: 16
            Rectangle {
                id: rect
                required property int index
                // Math.floor() 向下取整
                // Math.floor(Math.random()*3): 0~2随机数
                property int colorIndex: Math.floor(Math.random()*3)
                color:root.colorArray[colorIndex]
                width: 56; height: 56

                Text {
                    anchors.centerIn: parent
                    text: "Cell"+ /*parent.index*/ rect.Positioner.index
                    color: 'white'
                }
            }
        }
    }
}
